<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="js/txx.js"></script>
    <style>
        small{color:red}
    </style>
</head>
<body>
<div id="app">
    <my-header></my-header>
    <main class="c900 el-card" style="align-items: stretch; width: 600px; padding: 30px 50px">
        <h2>用户注册</h2>
        <el-form label-width="80px" label-position="left">
            <el-form-item label-width="0px" style="margin-bottom: 0px">
                <div class="flex" style="align-items: stretch">
                    <el-form label-width="80px" label-position="left" style="width:340px">
                        <el-form-item label="账号: ">
                            <el-input v-model="user.ename" placeholder="账号"></el-input>
                            <small>{{errors.ename}}</small>
                        </el-form-item>
                        <el-form-item label="密码: ">
                            <el-input v-model="user.password" type="password" placeholder="密码"></el-input>
                            <small>{{errors.password}}</small>
                        </el-form-item>
                        <el-form-item label="确认密码: ">
                            <el-input v-model="user.repwd" type="password" placeholder="确认密码"></el-input>
                            <small>{{errors.repwd}}</small>
                        </el-form-item>
                        <el-form-item label="昵称: ">
                            <el-input v-model="user.cname" placeholder="昵称"></el-input>
                            <small>{{errors.cname}}</small>
                        </el-form-item>
                    </el-form>
                    <el-popover width="400" trigger="click" placement="top-end">
                        <div slot="reference">
                        <el-image fit="cover" style="margin-right: 10px; width: 180px; height: 226px" :src="user.headimg">
                            <span slot="error" class="fbox border1">提交图片</span>
                        </el-image><br>
                            <small>{{errors.headimg}}</small>
                        </div>
                        <el-upload action="/upload/image"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <el-input  v-model="user.headimg" placeholder="粘贴图片">
                                <el-button slot="append">上传图片</el-button>
                            </el-input>
                        </el-upload>
                    </el-popover>
                </div>
            </el-form-item>
            <el-form-item label="邮箱: ">
                <el-input v-model="user.eamil" placeholder="邮箱"></el-input>
                <small>{{errors.eamil}}</small>
            </el-form-item>
            <el-form-item style="text-align: right; margin-right: 10px">
                <el-link href="login.html" :underline="false">去登陆</el-link>
                <el-button @click="reg" type="primary">注册</el-button>
            </el-form-item>
        </el-form>
<!--        <form action="txx/user/upload" method="post" enctype="multipart/form-data">-->
<!--            <input type="file" name="file"><button>上传</button>-->
<!--        </form>-->
    </main>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data:{
            user:{ename:"",cname:"",password:"",eamil:"",headimg:"",repwd:""},
            errors:{ename:"",cname:"",password:"",eamil:"",headimg:"",repwd:""}
        },
        methods:{
            reg(){
                this.errors = {ename:"",cname:"",password:"",eamil:"",headimg:"",repwd:""}
                this.user.headimg = "abc.png";
                axios.post("txx/user/reg",this.user).then(res=>{
                    if(res.data.code == 1){
                        this.$message(res.data.msg);
                    } else {
                        if(this.user.password != this.user.repwd){
                            this.errors.repwd = "两次输入的密码不一致!";
                        }
                        res.data.data.forEach(error=>{
                            this.errors[error.field] = error.defaultMessage;
                        });
                    }
                })
            },
            handleAvatarSuccess(res, file) {
                //this.imageUrl = URL.createObjectURL(file.raw);
                // res 是服务器返回的结果对象, 注意: 相当于 axios 的 res.data
                // res == axios res.data
                // axios  res.data.data ==> el  res.data
                console.info(res);
                // 判断图片上传是否成功
                if(res.code==1){
                    let path = res.data;
                    this.user.headimg = path;
                } else {
                    this.$alert(res.msg);
                }
            },
            beforeAvatarUpload(file) {
                // 所有图片类型
                const isJPG = true;//file.type.indexOf('image/')==0;
                const isLt2M = true; //file.size / 1024 / 1024 < 1;

                if (!isJPG) {
                    this.$message.error('上传头像必须是图片格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 1MB!');
                }
                // 返回 false 阻止上传
                return isJPG && isLt2M;
            }
        }
    })
</script>
</body>
</html>
<style>
    .el-form-item .el-form-item {
        margin-bottom: 22px
    }
</style>
